<template>
  <div class="content">
    <el-row>
      <el-col :span="24">
        <div>【在线情况】</div>
      </el-col>
    </el-row>
    <div id="online" class="online" :baseId="baseId"></div>
  </div>
</template>

<script>
import * as Axios from "../api/myAxios";
import { mapState } from "vuex";

export default {
  name: "SiteOnline",
  methods: {
    create(idName, num) {
      let online = [],
        offline = [];
      Axios.post().then((res) => {
        let listArr = res.data.parameter.list;
        let data;
        if (listArr.length == 1) {
          data = listArr[0].sensorList;
        } else {
          data = listArr[num].sensorList;
        }
        let bdArr = [],
          qxArr = [],
          ytArr = [];
        for (let i in data) {
          if (data[i].moduleEnum == "00") {
            bdArr.push(data[i]);
          } else if (data[i].moduleEnum == "02") {
            qxArr.push(data[i]);
          } else if (data[i].moduleEnum == "01") {
            ytArr.push(data[i]);
          }
        }
        let bdOnline = 0,
          bdOffline = 0,
          qxOnline = 0,
          qxOffline = 0,
          ytOnline = 0,
          ytOffline = 0;
        online = [];
        offline = [];
        for (let i in qxArr) {
          if (qxArr[i].sensorStatus == "10") {
            qxOnline++;
          } else if (qxArr[i].sensorStatus == "30") {
            qxOffline++;
          }
        }
        online.push(qxOnline);
        offline.push(qxOffline);
        // for (let i in ytArr) {
        //   if (ytArr[i].sensorStatus == "10") {
        //     ytOnline++;
        //   } else if (ytArr[i].sensorStatus == "30") {
        //     ytOffline++;
        //   }
        // }
        // online.push(ytOnline);
        // offline.push(ytOffline);
        for (let i in bdArr) {
          if (bdArr[i].sensorStatus == "10") {
            bdOnline++;
          } else if (bdArr[i].sensorStatus == "30") {
            bdOffline++;
          }
        }
        online.push(bdOnline);
        offline.push(bdOffline);
        let myChart = this.$echarts.init(document.getElementById(idName));
        let option = {
          title: [
            {
              subtext: "北斗",
              left: "1%",
              top: "20%",
              subtextStyle: {
                color: "white",
                fontSize: 14,
              },
            },
            // {
            //   subtext: "岩土",
            //   left: "1%",
            //   top: "40%",
            //   subtextStyle: {
            //     color: "white",
            //     fontSize: 14,
            //   },
            // },
            {
              subtext: "气象",
              left: "1%",
              top: "60%",
              subtextStyle: {
                color: "white",
                fontSize: 14,
              },
            },
          ],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          color: ["#3573FC", "#F93F00"],
          grid: {
            left: "15%",
            right: "4%",
            top: "20%",
            bottom: "20%",
            containLabel: false,
          },
          xAxis: [
            {
              type: "value",
              show: false,
              splitLine: {
                show: false,
              },
            },
          ],
          yAxis: [
            {
              type: "category",
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
            },
          ],
          series: [
            {
              name: "在线: ",
              type: "bar",
              stack: "总量",
              barWidth: 10,
              data: online,
              label: {
                show: true, //开启显示
                position: "insideTopLeft",
                offset: [-5, -15],
                textStyle: {
                  //数值样式
                  color: "white",
                  fontSize: 11,
                },
                formatter: "{a}{c}",
              },
            },
            {
              name: "掉线：",
              type: "bar",
              stack: "总量",
              barWidth: 10,
              data: offline,
              label: {
                show: true, //开启显示
                position: "insideTopRight",
                offset: [10, -15], //在上方显示
                textStyle: {
                  //数值样式
                  color: "white",
                  fontSize: 11,
                },
                formatter: function (a) {
                  let str;
                  if (a.value == 0) {
                    str = "";
                  } else {
                    str = "掉线:" + a.value;
                  }
                  return str;
                },
              },
            },
          ],
        };
        myChart.clear();
        myChart.setOption(option);
      });
    },
  },
  mounted() {
    let url = window.location.href;
    let id = url.split("?")[1].split("=")[1];
    switch (id) {
      case "1":
        this.create("online", 0);
      //   break;
      // case "2":
      //   this.create("online", 1);
      //   break;
      // case "3":
      //   this.create("online", 2);
      //   break;
      // case "4":
      //   this.create("online", 3);
    }
  },
  updated() {
    switch (this.baseId) {
      case 1:
        this.create("online", 0);
      //   break;
      // case 2:
      //   this.create("online", 1);
      //   break;
      // case 3:
      //   this.create("online", 2);
      //   break;
      // case 4:
      //   this.create("online", 3);
    }
  },
  computed: {
    ...mapState(["baseId"]),
  },
};
</script>

<style scoped>
.online {
  width: 300px;
  height: 250px;
}
.el-col > div {
  text-align: center;
  width: 70%;
  line-height: 35px;
  background: rgba(107, 151, 160, 0.5);
  color: #15f7ff;
  font-size: 22px;
  margin: 0 auto;
  margin-top: 10px;
}
</style>